/* eslint-disable */
import echarts from 'echarts/lib/echarts';
import Chart from 'echarts-for-react/lib/core';
import react from 'react'

class LeftChartPie extends react.Component {

  constructor(props) {
    super(props);
    this.state = {
    }
  }
  componentDidMount() {


    //获取图表实例
    let echarts_instance = this.echarts_reactLeftChartPie.getEchartsInstance();
    //给图表注册点击事件
    echarts_instance.on('legendselectchanged', function (params) {
      // console.log(params)
      // console.log(params.name)
      // this.props.onRightChartBar(params.name)
      this.props.onLeftChartPie(params.name)

    }.bind(this));
  }

  setOption = () => {
    const detail = this.props.detail
    return {
      color: ['#47FC96', '#D6FF76', '#E7A83E', '#08A2F9', '#99E3EC', '#ff5b00', '#FF5A6E', '#71C3B5'],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        icon: "circle",
        top: 15,
        right: 30,
        show: true,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowBlur: 10,
        textStyle: {
          color: "#fff",
          padding: [0, 10, 0, 20],
        },
        formatter: name => `${name}    ${detail.legendData[name] && detail.legendData[name].ratio}`,
      },
      title: [
        {
          text: '无废细胞',
          left: '20%',
          top: '38%',
          textStyle: {
            fontSize: 18,
            color: 'white',
          }
        }
      ],
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['50%', '70%'],
          center: ["30%", "45%"],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '12',
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: detail.data,
        }
      ]
    }
  }

  render() {
    return (
      <div className='situational-detail'>
        <Chart
          echarts={echarts}
          option={this.setOption()}
          notMerge
          lazyUpdate
          style={{ height: 150 }}
          ref={(e) => { this.echarts_reactLeftChartPie = e; }}
        />
      </div>
    )
  }

}
export default LeftChartPie;